<template>
<div>
  <div class="basediv">
    <div class="timelinedotdiv" >
        <img src="~img/timelinedot.png" class="timelinedot" v-if="isshowtime">
    </div>
    <div class="img-with-text" @click="topicTodetail(tabId,topicItem)" :style="{'margin-top':isshowtime?'0':'0.3rem'}">
        <p class="recommedtime" v-if="isshowtime" >{{time}}</p>
        <img v-if="topicimg" v-lazy="topicimg"  />
        <div class="titlediv" :class="{noimgtitlediv:!topicimg}">
          <p v-if="topictype==1||topictype==null" class="topiclisttitle">{{title}}</p>
          <p v-if="topictype==1||topictype==null" class="topiclistabbreviations">{{abbreviations}}</p>
        </div>
    </div>
  </div>
</div>
</template>
<script>
  export default {
    props:['topictype','followNumber','title','abbreviations','topicimg',"tabId","topicItem","time","isshowtime"],
    mounted(){
    },
    methods:{
      topicTodetail(tabId,topicItem){
          this.$emit("topicback",{tabId:tabId,topicItem:topicItem}) 
      }
    }
  }
</script>
<style scoped>
.basediv{
  height: 100%;
  display: flex;
  flex-direction: row;
}
.recommedtime{
  padding: 0.2rem 0;
  background: #f5f5f5;
}
.timelinedotdiv{
  background: rgba(148,138,137, 0.2);
  width:0.08rem;
  margin-left:0.4rem;
  position:relative;
  
}
.timelinedot{
  width: 0.3rem;
  height: 0.3rem;
  position: absolute;
  left:-0.12rem ;
  top: 0.22rem;
}
.greytimeline{
  height:100%;
  float: left;
  width: 0.08rem;
  background: #948A89;
  margin-right: 0.3rem;
}
.img-with-text{
  width:85%;
  text-align: justify;
  margin:0 0.3rem;
  background: #f5f5f5;
}
.titlediv{
  border:2px solid #fff;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px
}
.noimgtitlediv{
  border-top-left-radius:10px;
  border-top-right-radius:10px
}
.img-with-text img {
  width: 100%;
  display: block;
  height: 3.5rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.img-with-text p{
  margin: 0
}
.topiclisttitle{
  background: #ffffff;
  font-size: 0.32rem;
  color: #333;
  padding: 0.17rem 0 4px 0.3rem;
  font-family: PingFangSC Medium;
    white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}
.topiclistabbreviations{
  padding-left: 0.3rem;
  background: #ffffff;
  font-size: 0.24rem;
  color: #777777;
  padding-bottom: 0.17rem;
  font-family: PingFangSC Regular;
    white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
}
.topiclistfollownumber{
  font-size: 0.24rem;
  color: #999999;
}
  
</style>
